<template>
  <el-dialog width="470px" class="app-dialog" title="退出" :visible.sync="visible" :before-close="handleClose">
    <div class="content">
      <img src="@/assets/images/work/warn-icon.png" />
      <p>确定要退出登录吗？</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleLoginOut">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'LoginOut',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClose() {
      this.$emit('close', false)
    },
    async handleLoginOut() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=/home`)
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0.4rem 0;
  text-align: center;
  img {
    width: 45px;
    height: 45px;
    margin: 0 auto;
  }
  p {
    font-size: 14px;
    color: #333333;
    line-height: 19px;
    font-style: normal;
  }
}
</style>
